<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <h1>{{$store.state.a.num}}</h1>
        <h1>{{$store.state.b.num}} {{$store.getters.he}}</h1>
        <h1>{{$store.state.c.num}} <button @click='bian'>加一</button></h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vuex/dist/vuex.js"></script>
    <script>
        Vue.use(Vuex);
        let moduleA = {
            state : {
                num : 123,
            },
        };
        let moduleB = {
            state : {
                num : 456,
            },
            getters : {
                he : (state) => {
                    return state.num * 10;
                },
            },
        };
        let moduleC = {
            state : {
                num : 789,
            },
            mutations : {
                add : function(state){
                    state.num++;
                }
            }
        };
        let store = new Vuex.Store({
            modules : {
                a : moduleA,
                b : moduleB,
                c : moduleC,
            }
        });
        let vm = new Vue({
            el : "#box",
            store,
            methods: {
                bian : function(){
                    this.$store.commit("add");
                }
            },
        });
    </script>
</body>
</html>